import {Meta, Story} from "@storybook/addon-docs";
import {link, button} from "@heroui/theme";

<Meta title="Welcome" />

<br />

# Welcome 👋🏼

<br />

## HeroUI Version 2 - Design system

<br />

<div className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
  Here you can find the guidelines, components APIs and examples to help you build your next project with HeroUI.
</div>

<div className="flex flex-col gap-8">
  <div className="flex flex-row justify-start items-center mt-8 gap-4">
    <a
      href="https://heroui.com"
      target="_blank"
      className={button({
        color: "primary",
        variant: "flat",
        className: "bg-foreground/10 text-foreground [&>p]:text-foreground gap-1 [&>svg]:fill-none",
      })}
    >
      Website
      <svg
        aria-hidden="true"
        className="flex stroke-current text-foreground self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
    <a
      href="https://github.com/heroui-inc/heroui"
      target="_blank"
      className={button({
        color: "default",
        variant: "bordered",
        className: "[&>p]:text-foreground gap-1 [&>svg]:fill-none",
      })}
    >
      Github
      <svg
        aria-hidden="true"
        className="flex stroke-current self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
    <a
      href="https://discord.gg/9b6yyZKmH4"
      target="_blank"
      className={button({
        color: "default",
        variant: "bordered",
        className: "[&>p]:text-foreground gap-1 [&>svg]:fill-none",
      })}
    >
      Discord
      <svg
        aria-hidden="true"
        className="flex stroke-current self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
  </div>

  <div className="flex items-center gap-2">
    <svg height="36" viewBox="0 0 230 53" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M38.8492 0.0825195H13.9857C6.26161 0.0825195 0 6.34413 0 14.0682V38.9317C0 46.6558 6.26161 52.9174 13.9857 52.9174H38.8492C46.5733 52.9174 52.8349 46.6558 52.8349 38.9317V14.0682C52.8349 6.34413 46.5733 0.0825195 38.8492 0.0825195Z" fill="currentColor"/>
      <path d="M36.1953 37.5979V15.1782H38.9666V37.5979H36.1953Z" className="fill-background"/>
      <path d="M22.681 38.065C20.9476 38.065 19.4166 37.7069 18.088 36.9907C16.7595 36.2745 15.7163 35.2729 14.9586 33.9858C14.2113 32.6884 13.8376 31.1678 13.8376 29.424V15.1938L16.6401 15.1782V29.1905C16.6401 30.2492 16.8166 31.173 17.1695 31.9618C17.5327 32.7403 18.0102 33.389 18.6018 33.908C19.1935 34.4269 19.8422 34.8162 20.548 35.0757C21.2642 35.3248 21.9752 35.4493 22.681 35.4493C23.3971 35.4493 24.1133 35.3196 24.8295 35.0601C25.5457 34.8006 26.1944 34.4166 26.7757 33.908C27.3673 33.389 27.8395 32.7351 28.1925 31.9463C28.5454 31.1574 28.7218 30.2388 28.7218 29.1905V15.1782H31.5243V29.424C31.5243 31.1574 31.1454 32.6728 30.3877 33.9703C29.6404 35.2677 28.6024 36.2745 27.2739 36.9907C25.9453 37.7069 24.4143 38.065 22.681 38.065Z" className="fill-background"/>
      <path d="M225.78 45.42V6.77502H229.725V45.42H225.78Z" fill="currentColor"/>
      <path d="M202.638 46.2251C199.686 46.2251 197.074 45.6168 194.802 44.4002C192.548 43.1836 190.777 41.466 189.488 39.2475C188.2 37.029 187.556 34.4348 187.556 31.4649V6.80186L191.528 6.77502V30.955C191.528 32.9588 191.868 34.6942 192.548 36.1613C193.228 37.6105 194.113 38.8092 195.205 39.7574C196.314 40.6878 197.522 41.3766 198.828 41.8238C200.134 42.2711 201.404 42.4948 202.638 42.4948C203.891 42.4948 205.17 42.2711 206.476 41.8238C207.782 41.3766 208.981 40.6878 210.072 39.7574C211.164 38.8092 212.049 37.6105 212.729 36.1613C213.409 34.6942 213.749 32.9588 213.749 30.955V6.77502H217.721V31.4649C217.721 34.4348 217.077 37.029 215.788 39.2475C214.5 41.4481 212.72 43.1657 210.448 44.4002C208.194 45.6168 205.59 46.2251 202.638 46.2251Z" fill="currentColor"/>
      <path d="M167.896 46.2251C165.015 46.2251 162.555 45.5721 160.516 44.2661C158.476 42.96 156.911 41.153 155.819 38.845C154.728 36.5371 154.182 33.8892 154.182 30.9013C154.182 27.8598 154.737 25.1941 155.846 22.904C156.955 20.6139 158.53 18.8337 160.569 17.5635C162.627 16.2753 165.069 15.6312 167.896 15.6312C170.794 15.6312 173.263 16.2843 175.303 17.5903C177.36 18.8785 178.926 20.6765 179.999 22.9845C181.09 25.2746 181.636 27.9135 181.636 30.9013C181.636 33.9428 181.09 36.6176 179.999 38.9255C178.908 41.2156 177.333 43.0047 175.276 44.2929C173.218 45.5811 170.758 46.2251 167.896 46.2251ZM167.896 42.4412C171.116 42.4412 173.514 41.3766 175.088 39.2476C176.662 37.1006 177.45 34.3186 177.45 30.9013C177.45 27.3947 176.653 24.6036 175.061 22.5283C173.487 20.4529 171.098 19.4152 167.896 19.4152C165.731 19.4152 163.942 19.9072 162.528 20.8912C161.133 21.8574 160.086 23.2081 159.388 24.9436C158.709 26.6611 158.369 28.6471 158.369 30.9013C158.369 34.3901 159.174 37.1901 160.784 39.3013C162.394 41.3945 164.765 42.4412 167.896 42.4412Z" fill="currentColor"/>
      <path d="M136.975 45.4199V16.4362H140.518V23.4138L139.82 22.5013C140.142 21.6426 140.562 20.8554 141.081 20.1397C141.6 19.4062 142.164 18.8068 142.772 18.3416C143.523 17.6797 144.4 17.1787 145.402 16.8388C146.404 16.481 147.415 16.2752 148.434 16.2215C149.454 16.15 150.385 16.2215 151.225 16.4362V20.1397C150.17 19.8713 149.016 19.8087 147.763 19.9518C146.511 20.095 145.357 20.5959 144.302 21.4547C143.335 22.2061 142.611 23.1096 142.128 24.1652C141.645 25.2029 141.323 26.3122 141.162 27.493C141.001 28.6559 140.92 29.8099 140.92 30.9549V45.4199H136.975Z" fill="currentColor"/>
      <path d="M117.843 46.2251C115.016 46.2251 112.565 45.5989 110.489 44.3466C108.432 43.0942 106.831 41.3319 105.686 39.0597C104.541 36.7875 103.968 34.1218 103.968 31.0624C103.968 27.8956 104.532 25.1583 105.659 22.8503C106.786 20.5424 108.369 18.7622 110.409 17.5098C112.466 16.2574 114.891 15.6312 117.682 15.6312C120.544 15.6312 122.986 16.2932 125.008 17.6171C127.03 18.9232 128.559 20.8018 129.597 23.2529C130.635 25.704 131.109 28.6292 131.019 32.0285H126.994V30.633C126.922 26.8758 126.108 24.0401 124.552 22.1257C123.013 20.2114 120.759 19.2542 117.789 19.2542C114.676 19.2542 112.287 20.265 110.624 22.2867C108.978 24.3084 108.155 27.1889 108.155 30.9282C108.155 34.578 108.978 37.4137 110.624 39.4354C112.287 41.4392 114.64 42.4412 117.682 42.4412C119.757 42.4412 121.564 41.967 123.103 41.0188C124.659 40.0527 125.885 38.6661 126.779 36.8591L130.456 38.2815C129.311 40.8041 127.62 42.7632 125.384 44.1587C123.165 45.5363 120.652 46.2251 117.843 46.2251ZM110.348 32.0285V28.7276H128.899V32.0285H110.348Z" fill="currentColor"/>
      <path d="M68.835 45.42V6.77502H72.78V24.1921H94.142V6.77502H98.0602V45.42H94.142V27.9761H72.78V45.42H68.835Z" fill="currentColor"/>
    </svg>
  </div>
</div>

<br />


<div className="block text-xs [&>p]:text-default-400">
  Last updated on <time dateTime="2023-03-07">Jul 31, 2023</time>
</div>
